<template>
  <!-- 搜索框 -->
  <div class="search-box" >
    <VanSearch v-model="searchValue" placeholder="请输入搜索关键词"  @search="onSearch"/>
  </div>
  <!-- 左右布局 -->
  <div style="display: flex;">
    <!-- 侧边菜单 -->
    <van-sidebar style="width: 110px;" v-model="active" @change="onChange">
      <van-sidebar-item  :title="item.fenlei" v-for="(item, index) in data.tableData" key="index" />
    </van-sidebar>

    <!-- 右侧内容 -->
    <div style="margin-left: 10px;" class="renqibang-container">
      <h3 style="background: #fff;
    font-size: .28rem;
    text-align: left;
    font-weight: 700;
    margin-top: .3rem;
    height: .63rem;
    line-height: .63rem;
    overflow: hidden;
    color: #333;">当前分类：{{ currentCategory }}</h3>
      <!-- 这里可以放商品列表、图片等内容 -->
      <div class="renqibang-left card" v-for="item in data.fenleiShangpin" @click="commodity(item)">
        <div style="
                      width: 140px;
                      height: 120px;
                      margin: 0 auto;
          ">
          <img style="width: 110px;height: 125px;" :src="item.img" alt="轮播图" class="swipe-image" />
        </div>
        <div>
          <div class="wenzishenlue" style="height: 40px;
                      line-height: 40px;
                      font-weight: bold;
                      font-size: .28rem;
                      color: rgba(0, 0, 0, .87);
          ">{{item.name}}</div>
          <div style="margin-top: .06rem;
                      font-size: .22rem;
                      line-height: .3rem;
                      color: rgba(0, 0, 0, .54);
          ">{{ item.fenlei }}</div>
          <div style="
          font-size: .28rem;
          color: #ea625b;
          height: 1.5em;
          line-height: 1.5em;
          position: relative;
          display: inline-block;
          ">￥{{ item.jiage }}元</div>
          <div style="
                    width: 2rem;
                    background: #ea625b;
                    border-radius: .05rem;
                    text-align: center;
                    color: #fff;
                    font-size: .24rem;
                    padding: .16rem 0;
                    font-weight: 700;
                    margin: 0 auto;
          ">立即购买</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, ref} from 'vue';
import {reactive} from "vue";
import request from "@/utils/request.js";
import router from "@/router/index.js";

const data = reactive({
  active: 0,
  pageNum: 1,
  pageSize: 5,
  total: 6,
  tableData: [
    {
      fenlei: '全部商品'
    }
  ],
  fenlei: '',
  fenleiShangpin: [],
})
const searchValue = ref('');
const active = ref(0);

const commodity = (item) => {
  router.push(`/commodity/${item.id}`)
}
const onSearch = () => {
  console.log(searchValue.value)
  request.get('shangpinxiangqing/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      name: searchValue.value,
    }
  }).then(res => {
    console.log(res.data.list)
    data.fenleiShangpin = res.data.list;
  }).catch(err => {
    ElMessage.error(err);
  });
}
// 获取当前选中的分类名称
const currentCategory = computed(() => {
  return data.fenlei || '全部商品';
});
const onChange = (index) => {
  const item = data.tableData[index];
  if (item) {
    data.fenlei = item.fenlei; // 更新当前分类名
  }
  fenleishangpin(); // 刷新商品列表
};
const fenleishangpin = () => {
  if (data.fenlei === '全部商品') {
    request.get('shangpinxiangqing/selectPage', {
      params: {
        pageNum: data.pageNum,
        pageSize: data.pageSize,
      }
    }).then(res => {
      data.fenleiShangpin = res.data.list;
    }).catch(err => {
      ElMessage.error(err);
    });
  }else {
  request.get('shangpinxiangqing/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      fenlei: data.fenlei
    }
  }).then(res => {
    data.fenleiShangpin = res.data.list;
  }).catch(err => {
    ElMessage.error(err);
  });
  }
}
const load = () => {
  request.get('shangpinfenlei/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
    }
  }).then(res => {
    data.tableData.push(...res.data.list);
    fenleishangpin()
  }).catch(err => {
    ElMessage.error(err);
  });
}
load();
</script>
<style scoped>
.van-sidebar{
  width: 90px;
}
.renqibang-container {
  width: 100%;
  height: 500px; /* 设置高度，可根据需要调整 */
}

.renqibang-left {
  display: inline-block;
  width: 48%;
  text-align: center;
  font-size: 24px;
  margin: 5px;
}
</style>